<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('检测大区')" :total="data.area.cnt | NumberFormat">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area />
          </div>
          <template slot="footer">{{ $t('今日新增') }}<span> {{ data.area.latestCnt | NumberFormat }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('检测街道')" :total="data.street.cnt | NumberFormat">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area />
          </div>
          <template slot="footer">{{ $t('今日新增') }}<span> {{ data.street.latestCnt | NumberFormat }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('违规车辆')" :total="data.car.cnt | NumberFormat">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar />
          </div>
          <template slot="footer">{{ $t('今日检测违停') }} <span>{{ data.car.latestCnt | NumberFormat }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('同步操作')" :total=" syncP +'%'">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <template>
              <a-button type="danger" :loading="loadingSync" @click="sync">同步 SYNC</a-button>
            </template>
          </div>
          <template slot="footer">
            <trend flag="" style="margin-right: 16px; font-size: 12px">
              <span slot="term">{{ $t('同步时间') }}</span>
              {{ data.asyncTime || '' }}
            </trend>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
<!--            <div class="extra-item">-->
<!--              <a>{{ $t('dashboard.analysis.all-day') }}</a>-->
<!--              <a>{{ $t('dashboard.analysis.all-week') }}</a>-->
<!--              <a>{{ $t('dashboard.analysis.all-month') }}</a>-->
<!--              <a>{{ $t('dashboard.analysis.all-year') }}</a>-->
<!--            </div>-->
<!--            <a-range-picker :style="{width: '256px'}" />-->
<!--            <template>-->
<!--              <div class="demo-dropdown-wrap">-->
<!--                <a-dropdown-button @click="handleButtonClick">-->
<!--                  请选择大区-->
<!--                  <template #overlay>-->
<!--                    <a-menu @click="handleMenuClick">-->
<!--                      <a-menu-item key="1">-->
<!--                        <UserOutlined />-->
<!--                        1st menu item-->
<!--                      </a-menu-item>-->
<!--                      <a-menu-item key="2">-->
<!--                        <UserOutlined />-->
<!--                        2nd menu item-->
<!--                      </a-menu-item>-->
<!--                      <a-menu-item key="3">-->
<!--                        <UserOutlined />-->
<!--                        3rd item-->
<!--                      </a-menu-item>-->
<!--                    </a-menu>-->
<!--                  </template>-->
<!--                </a-dropdown-button>-->
<!--                <div style="width: 10px; display: inline-flex"></div>-->
<!--                <a-dropdown-button @click="handleButtonClick">-->
<!--                  请选择街道-->
<!--                  <template #overlay>-->
<!--                    <a-menu @click="handleMenuClick">-->
<!--                      <a-menu-item key="1">-->
<!--                        <UserOutlined />-->
<!--                        1st menu item-->
<!--                      </a-menu-item>-->
<!--                      <a-menu-item key="2">-->
<!--                        <UserOutlined />-->
<!--                        2nd menu item-->
<!--                      </a-menu-item>-->
<!--                      <a-menu-item key="3">-->
<!--                        <UserOutlined />-->
<!--                        3rd item-->
<!--                      </a-menu-item>-->
<!--                    </a-menu>-->
<!--                  </template>-->
<!--                </a-dropdown-button>-->
<!--              </div>-->
<!--            </template>-->
          </div>
          <a-tab-pane loading="true" :tab="$t('全部')" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="barData" :title="$t('违停统计')" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list :title="$t('违停排名')" :list="data.rankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
<!--          <a-tab-pane :tab="$t('街道')" key="2">-->
<!--            <a-row>-->
<!--              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
<!--                <bar :data="barData2" :title="$t('dashboard.analysis.visits-trend')" />-->
<!--              </a-col>-->
<!--              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">-->
<!--                <rank-list :title="$t('dashboard.analysis.visits-ranking')" :list="rankList"/>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-tab-pane>-->
        </a-tabs>
      </div>
    </a-card>

  </div>
</template>

<script>
import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'
import { baseMixin } from '@/store/app-mixin'

// const barData = []
const barData2 = []
for (let i = 0; i < 12; i += 1) {
  // barData.push({
  //   x: `${i + 1}月`,
  //   y: Math.floor(Math.random() * 1000) + 200
  // })
  barData2.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const searchUserData = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}
const searchUserScale = [
  {
    dataKey: 'x',
    alias: '时间'
  },
  {
    dataKey: 'y',
    alias: '用户数',
    min: 0,
    max: 10
  }]

const searchData = []
for (let i = 0; i < 50; i += 1) {
  searchData.push({
    index: i + 1,
    keyword: `搜索关键词-${i}`,
    count: Math.floor(Math.random() * 1000),
    range: Math.floor(Math.random() * 100),
    status: Math.floor((Math.random() * 10) % 2)
  })
}

const DataSet = require('@antv/data-set')

const sourceData = [
  { item: '家用电器', count: 32.2 },
  { item: '食用酒水', count: 21 },
  { item: '个护健康', count: 17 },
  { item: '服饰箱包', count: 13 },
  { item: '母婴产品', count: 9 },
  { item: '其他', count: 7.8 }
]

const pieScale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%'
}]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
})
const pieData = dv.rows

export default {
  name: 'Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data () {
    return {
      loading: true,
      rankList,

      // 搜索用户数
      searchUserData,
      searchUserScale,
      searchData,

      barData: [],
      barData2,

      //
      pieScale,
      pieData,
      sourceData,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },

      syncP: 100,
      loadingSync: false,
      interval: {},
      data: {
        'area': {
          'cnt': 0,
          'latestCnt': 0
        },
        'street': {
          'cnt': 0,
          'latestCnt': 0
        },
        'car': {
          'cnt': 0,
          'latestCnt': 0
        },
        'asyncTime': null,
        'analysisList': [],
        'rankList': []
      }
    }
  },
  computed: {
    searchTableColumns () {
        return [
      {
        dataIndex: 'index',
        title: this.$t('dashboard.analysis.table.rank'),
        width: 90
      },
      {
        dataIndex: 'keyword',
        title: this.$t('dashboard.analysis.table.search-keyword')
      },
      {
        dataIndex: 'count',
        title: this.$t('dashboard.analysis.table.users')
      },
      {
        dataIndex: 'range',
        title: this.$t('dashboard.analysis.table.weekly-range'),
        align: 'right',
        sorter: (a, b) => a.range - b.range,
        scopedSlots: { customRender: 'range' }
      }
      ]
    }
  },
  created () {
    this.info()
  },
  methods: {
    sync() {
      this.loadingSync = true
      this.syncP = 0
      let jishu = 20
      this.interval = setInterval(() => {
        this.syncP += jishu
        if (this.syncP > 80) {
          jishu = 5
        } else if (this.syncP > 90) {
          jishu = 1
        } else if (this.syncP >= 99) {
          clearInterval(this.interval)
        }
        console.log(this.syncP)
      }, 1000)
      console.log(this.interval)

      this.$http.post('http://localhost:8003/fj-api/analysis/sync', {}, { contentType: false, processData: false, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
          .then((response) => {
            console.log('upload response:', response)
            this.$message.success('同步成功')
          }).catch(() => {
            this.$message.error('同步失败')
        }).finally(() => {
          clearInterval(this.interval)
          console.log('final')
          console.log(this.interval)
          this.syncP = 100
          this.loadingSync = false
          this.info()
        })
    },
    info() {
      this.barData = [];
      this.loading = true
      this.$http.get('http://localhost:8003/fj-api/analysis/info')
        .then((response) => {
          console.log('upload response:', response)
          this.data = response.data
          // 统计
          this.data.analysisList.forEach((item, index) => {
            this.barData.push({
                x: `${item.month.substring(5, 7)}月`,
                y: item.cnt
              })
          })
          console.log('barData')
          console.log(this.barData)
        }).catch(() => {

      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
